<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.0.js"></script>

<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.css">

<script src="slider/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="slider/css/slider.css">


<script src="script-bootstrap.js"></script>

<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="calc_pane">
		<ul>
			<li><a href="#step-1">Шаг 1</a></li>
			<li><a href="#step-2">Шаг 2</a></li>
		</ul>
		<div id="step-1">
			<div id="window_wrap">
				<div id="vertical_slider_wrap">
					<input type="text" name="window_height" value="" id="window_height" />
					<div id="vertical_slider"></div>
				</div>
				<div id="window_canvas"></div>
				<div id="horizontal_slider_wrap">
					<div id="horizontal_slider"></div>
					<input type="text" name="window_width" value="" id="window_width" />
				</div>
			</div>
			<div id="params_wrap">
				<div id="window_type">
					<h3>Тип оконной конструкции</h3>
					<div id="window_type_canvas">
						<img id="window_type_canvas_img"
							src="images/1stvorki_1povorot.png" />
					</div>
					<!--					<div style="display: none" id="window_type_dialog"> 
						<div class="style_block" id="one_panel">
							<img src="images/1stvorki_1povorot.png" /> <img
								src="images/1stvorki_gluhoe.png" />
						</div>
						<div class="style_block" id="two_panel">
							<img src="images/2stvorki_gluhoe.png" /> <img
								src="images/2stvorki_1povorot.png" /> <img
								src="images/2stvorki_2povorot.png" />
						</div>
						<div class="style_block" id="three_panel">
							<img src="images/3stvorki_gluhoe.png" /> <img
								src="images/3stvorki_1povorot.png" /> <img
								src="images/3stvorki_2povorot.png" /> <img
								src="images/3stvorki_3povorot.png" />
						</div>
						<div class="style_block" id="door">
							<img src="images/balcon.png" />
						</div>
				</div> 													-->
					<!-- Start modal -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Выберите тип окна</h4>
								</div>
								<div class="modal-body">
									<div class="style_block" id="one_panel">
										<img src="images/1stvorki_1povorot.png" /> <img
											src="images/1stvorki_gluhoe.png" />
									</div>
									<div class="style_block" id="two_panel">
										<img src="images/2stvorki_gluhoe.png" /> <img
											src="images/2stvorki_1povorot.png" /> <img
											src="images/2stvorki_2povorot.png" />
									</div>
									<div class="style_block" id="three_panel">
										<img src="images/3stvorki_gluhoe.png" /> <img
											src="images/3stvorki_1povorot.png" /> <img
											src="images/3stvorki_2povorot.png" /> <img
											src="images/3stvorki_3povorot.png" />
									</div>
									<div class="style_block" id="door">
										<img src="images/balcon.png" />
									</div>

								</div>
								<div class="modal-footer">
									<!--
									<button type="button" class="btn btn-default"
										data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save
										changes</button>
  -->
								</div>
							</div>
						</div>
					</div>
					<!-- End modal -->
				</div>
				<div>
					<h3>Профильная система</h3>
					<div id="profile_radio" class="radio_group">
						<input type="radio" id="profile1" name="profile"> <label
							for="profile1">Профиль 1</label> <input type="radio"
							id="profile2" name="profile"> <label for="profile2">Профиль
							2</label> <input type="radio" id="profile3" name="profile"> <label
							for="profile3">Профиль 3</label> <input type="radio"
							id="profile4" name="profile"> <label for="profile4">Профиль
							4</label>
					</div>
				</div>
				<div>
					<h3>Поворотно-откидной механизм открывания окна</h3>
					<div id="mech_radio" class="radio_group">
						<input type="radio" id="yes" name="mech"> <label for="yes">Да</label>
						<input type="radio" id="no" name="mech" checked="checked">
						<label for="no">Нет</label>
					</div>
				</div>
				<div>
					<h3>Ламинация</h3>
					<div id="laminat_canvas">
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
					</div>
					<div class="clr_bth"></div>
				</div>

			</div>
			<a href="#" id="button-step-2">Далее</a>
		</div>
		<div id="step-2">
			<h2>Параметры окна и дополнительные опции</h2>
			<div id="params_accordion">
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
			</div>
		</div>
	</div>
</body>
</html>
